<div>
    <div class="btn-toolbar" ng-if="!options.hideToolbar">
        <div class="btn-group" ng-if="!options.widgetButtons">
            <span class="dropdown" on-toggle="toggled(open)">
              <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
                Button dropdown <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li ng-repeat="widget in widgetDefs">
                  <a href="#" ng-click="addWidgetInternal($event, widget);" class="dropdown-toggle">{{widget.name}}</a>
                </li>
              </ul>
            </span>
        </div>

        <div class="btn-group" ng-if="options.widgetButtons">
            <button ng-repeat="widget in widgetDefs"
                    ng-click="addWidgetInternal($event, widget);" type="button" class="btn btn-primary">
                {{widget.name}}
            </button>
        </div>

        <button class="btn btn-warning" ng-click="resetWidgetsToDefault()">Default Widgets</button>

        <button ng-if="options.storage && options.explicitSave" ng-click="options.saveDashboard()" class="btn btn-success" ng-hide="!options.unsavedChangeCount">{{ !options.unsavedChangeCount ? "Alternative - No Changes" : "Save" }}</button>

        <button ng-click="clear();" ng-hide="!widgets.length" type="button" class="btn btn-info">Clear</button>
    </div>

    <div ui-sortable="sortableOptions" ng-model="widgets" class="dashboard-widget-area">
        <div ng-repeat="widget in widgets" ng-style="widget.style" class="widget-container" widget>
            <div class="widget panel panel-default">
                <div class="widget-header panel-heading">
                    <h3 class="panel-title">
                        <span class="widget-title" ng-dblclick="editTitle(widget)" ng-hide="widget.editingTitle">{{widget.title}}</span>
                        <form action="" class="widget-title" ng-show="widget.editingTitle" ng-submit="saveTitleEdit(widget)">
                            <input type="text" ng-model="widget.title" class="form-control">
                        </form>
                        <span class="label label-primary" ng-if="!options.hideWidgetName">{{widget.name}}</span>
                        <span ng-click="removeWidget(widget);" class="glyphicon glyphicon-remove" ng-if="!options.hideWidgetClose"></span>
                        <span ng-click="openWidgetSettings(widget);" class="glyphicon glyphicon-cog" ng-if="!options.hideWidgetSettings"></span>
                    </h3>
                </div>
                <div class="panel-body widget-content"></div>
                <div class="widget-ew-resizer" ng-mousedown="grabResizer($event)"></div>
            </div>
        </div>
    </div>
</div>
